import React,{Component} from 'react'
import * as api from '../../api/order'
import { Modal } from 'antd'
export default class Order extends Component{
    constructor(props){
        super(props)
        this.state={
            orders:[],
            details:[],
            orderDetail:{}
        }
    }
    componentDidMount(){
        api.orderList({per:4}).then(data=>{
            console.log(data.data.orders)
            this.setState({
                orders:data.data.orders
            })
        })
    }
    search(id){
        api.orderDetail(id).then(data=>{
            console.log(data)
            let products = data.data.details
            let orderDetail = data.data.order
            this.setState({
                details:products,
                orderDetail:orderDetail
            })
            Modal.info({
                title:'订单详情',
                content:(
                    <div>
                        <p>订单编号：{orderDetail.no}</p>
                        <p>收货者：{orderDetail.receiver}</p>
                        <p>商品数量：{products.length}件</p>
                        <p>消费金额：{orderDetail.price}元</p>
                    </div>
                )
            })
        })
    }
    render(){
        return(
            <div className="orderList" style={{display:'flex',justifyContent:'space-around'}}>
                {
                    this.state.orders.map((v,i)=>{
                        return(
                            <dl key={i}>
                                <dt>订单{i+1}:</dt>
                                <dd>接受者：{v.receiver}</dd>
                                <dd>消费金额：<span style={{color:'red'}}>￥{v.price}</span></dd>
                                <dd>订单编号：{v.no}</dd>
                                <button onClick={()=>this.search(v._id)}>查看详情&gt;&gt;</button>
                            </dl>
                        )
                    })
                }
                
            </div> 
        )
        
    }
}